<template>
    <div style="height: 100%;width: 100%;position: relative;">
        <baidu-map
                style="height: 100%;width: 100%;"
                :center="{lng: 116.404, lat: 39.915}"
                :zoom="11"
                :scroll-wheel-zoom="true"
                @ready="handleMapReady"
        >
            <!-- 轨迹线（可选，用于显示完整轨迹） -->
            <bm-polyline
                    :path="trackPoints"
                    stroke-color="#4285F4"
                    :stroke-weight="3"
                    stroke-dasharray="5,5"
            ></bm-polyline>
            <!--
                路书组件（轨迹回放核心）
                :path="trackPoints" // 轨迹点数组
                :speed="speed" // 回放速度（像素/秒）
                :autoView="true" // 是否自动调整地图视野以显示整个轨迹
                :icon="carIcon" // 移动图标（可选）
                @start="handleStart" // 开始播放时触发
                @pause="handlePause" // 暂停时触发
                @end="handleEnd" // 结束时触发
            -->
            <BmlLushu ref="lushu"
                      :path="currentPath"
                      :speed="speed"
                      :autoView="true"
                      :icon="carIcon"
                      :play="isPlaying"
                      @start="handleStart"
                      @pause="handlePause"
                      @end="handleEnd"
            ></BmlLushu>
        </baidu-map>
        <!--右上角-->
        <div style="
                position: absolute;top: 10px;right: 45px;
                display: flex;flex-direction: column; align-items: center;
                gap:5px;">
            <el-button size="mini" round @click="start" style=" width: 120px !important;margin-left: 0 !important; ">
                开始
            </el-button>
            <el-button size="mini" round @click="pause" style=" width: 120px !important;margin-left: 0 !important; ">
                暂停
            </el-button>
            <el-button size="mini" round @click="reset" style=" width: 120px !important;margin-left: 0 !important; ">
                重置
            </el-button>
        </div>
    </div>
</template>
<script>
    import mJson from "@/assets/json/轨迹回放数据.json";
    import BmlLushu from 'vue-baidu-map/components/extra/Lushu.vue'; // 注意路径是 extra/lushu

    export default {
        components: {
            BmlLushu // 局部注册路书组件
        },
        data() {
            return {
                map: null,
                BMap: null,

                trackPoints: [],// 轨迹点数组（{ lng, lat }）
                trackInfo: [],// 轨迹点数组详细信息
                carIcon: {
                    url: require('@/assets/images/online_train.png'),
                    size: {width: 25, height: 25},//必须配置
                    opts: {
                        anchor: {width: 12.5, height: 12.5},
                        imageSize: {width: 25, height: 25},//必须配置
                    }  // 锚点（中心点）
                },//车辆图标
                speed: 100, // 回放速度
                isPlaying: false,//播放状态
                currentPath: [], // 动态路径：当前位置 → 终点
                pausePosition: null, // 暂停时的实时坐标 {lng, lat}
                nextPointIndex: 0, // 暂停后下一个要播放的轨迹点索引
            }
        },
        methods: {
            //初始化地图
            handleMapReady({BMap, map}) {
                this.BMap = BMap;
                this.map = map;

                //初始化轨迹数据
                this.initEnv();
            },
            //初始化轨迹数据
            initEnv() {
                for (let i = 0; i < mJson.length; i++) {
                    let item = mJson[i];
                    if (item.latitude && item.longitude) {
                        this.trackInfo.push(item);
                        this.trackPoints.push({
                            lng: item.longitude,
                            lat: item.latitude,
                        });
                    }
                }

                if (this.trackPoints.length > 0) {
                    const firstPoint = this.trackPoints[0];
                    this.map.setCenter(new this.BMap.Point(firstPoint.lng, firstPoint.lat));
                }
            },
            // 开始回放
            start() {
                if (!this.isPlaying) {
                    if (this.pausePosition && this.nextPointIndex < this.trackPoints.length) {
                        // 关键：构建新路径 = [暂停位置, 下一个轨迹点, ...剩余轨迹点]
                        this.currentPath = [
                            this.pausePosition, // 插入暂停时的实时位置作为起点
                            ...this.trackPoints.slice(this.nextPointIndex) // 后续轨迹点
                        ];
                    } else {
                        // 未暂停过（首次播放）或已播放到终点，用完整路径
                        this.currentPath = [...this.trackPoints];
                    }
                    this.isPlaying = true;
                }
            },
            // 暂停回放
            pause() {
                if (this.isPlaying) {
                    this.isPlaying = false;
                }
            },
            // 重置回放（回到起点）
            reset() {
                this.$refs.lushu.stop(); // 先停止
                this.$refs.lushu.start(); // 重新开始
            },
            // 事件回调
            handleStart() {
                console.log('轨迹回放开始');
            },
            handlePause(lushuInstance) {
                console.log('轨迹回放暂停');
                // 1. 获取路书内部的移动标记点（marker）的实时位置
                const marker = lushuInstance._marker;
                if (marker && marker.getPosition) {
                    const pos = marker.getPosition();
                    this.pausePosition = {lng: pos.lng, lat: pos.lat};
                }
                // 2. 记录下一个要播放的轨迹点索引（当前索引 + 1）
                this.nextPointIndex = lushuInstance._index + 1;
            },
            handleEnd() {
                console.log('轨迹回放结束');
            }
        },
    }
</script>